<template>
  <div class="bodyBox">
    <div class="bodyLeftBox">
      <a-textarea
        class="jsonTextArea"
        v-model:value="jsonValue"
        allow-clear
        placeholder="请输入JSON代码"
        autofocus
      />
    </div>
    <div class="bodyRightBox">
      <div class="bodyRightBottomBox">
        <JsonViewer class="jsonTextArea" :json="jsonValue" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import JsonViewer from '../components/JsonViewer.vue'

const jsonValue = ref('{"String":"字符串","Boolean": true, "Number": 1}')
</script>

<style scoped>
.bodyBox {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.bodyLeftBox {
  background-color: white;
  width: 600px;
  height: 100%;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
}

.bodyRightBox {
  background-color: white;
  margin-left: 25px;
  height: 100%;
  flex: 1;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
}

.bodyRightBottomBox {
  width: 100%;
  height: 100%;
  flex: 1;
}

.jsonTextArea {
  height: 100%;
  width: 100%;
}

.jsonTextArea :deep(.ant-input) {
  border-radius: 0 !important;
}

.bodyRightBottomBox :deep(.ant-input) {
  border-radius: 0 !important;
}

.jsonTextArea :deep(.ant-input) {
  resize: none !important;
}

.bodyRightBottomBox :deep(.ant-input) {
  resize: none !important;
}
</style>
